<!--
 * @Author: your name
 * @Date: 2020-10-12 12:53:58
 * @LastEditTime: 2022-07-11 10:12:56
 * @LastEditors: zhangjx
 * @Description: In User Settings Edit
-->
<template>
  <div class="home">
    <div class="item"
         v-for="item in option.data"
         :key="item.id"
         @click="handleToLink(item)">
      <img :src="item.img"
           style="width:100%">
    </div>
  </div>
</template>

<script>
import { reactive } from "vue"
import { useRouter } from "vue-router"

const img1 = require("@/assets/images/20201012132756.png")
const img2 = require("@/assets/images/20201019150953.png")
const img3 = require("@/assets/images/20201019151041.png")
const img4 = require("@/assets/images/big.png")

export default {
  setup() {
    const router = useRouter()
    // 指定图表的配置项和数据
    const option = reactive({
      data: [
        { id: 2, img: img1, url: "SmartCommunity" },
        { id: 1, img: img4, url: "LandBigData" },
        { id: 3, img: img2, url: "map2" },
        { id: 4, img: img3, url: "echartMap" }
      ]
    })
    const handleToLink = (item) => {
      router.push({ name: item.url })
    }
    return { option, handleToLink }
  }
}
</script>
<style lang="scss" scoped>
.home {
  display: flex;
  position: absolute;
  width: 100vw;
  height: 100vh;
  background: #247d5f;
  justify-content: center;
  align-items: center;
  .item {
    width: 25%;
    height: 2.6rem;
    padding: 0.2rem;
    margin: 0.2rem;
    border-radius: 0.2rem;
    background: #9fb1ab;
    box-shadow: 20px 20px 60px #1f6a51, -20px -20px 60px #29906d;
    img {
      width: 100%;
      border-radius: 0.1rem;
    }
    &:hover {
      cursor: pointer;
      background-color: #40a0ffb2;
      color: #fff;
      transition: width 2s, background-color 1s;
    }
  }
}
</style>
